<template>
  <div class="Admin-box">
      <div class="Admin-box1">
          <div 
          style="width:800px;background:#CDCDB4;text-align:left;padding:10px;font-weight:700">
          历史缴费记录:
          </div>
          <div 
          style="text-align:left;padding:15px">
          免缴纳月份:<span>{{date.join(',')}}</span> <strong style="margin-left:20px;color:blue;text-decoration:underline;cursor:pointer" @click="resetDate">修改</strong>
          </div>
          <div class="month" v-show="isMonth" style="position:fixed;background:rgba(109, 108, 108,0.5);z-index:999;top:0;left:0;bottom:0;right:0">
            <el-card class="box-card" style="width:400px;height:200px;position:absolute;top:0;left:0;bottom:0;right:0;margin:auto">
              <p>管理费免缴月份</p>
              <div style="display:flex;flex-wrap:wrap">
                  <el-checkbox label="1月" name="type"></el-checkbox>
                  <el-checkbox label="2月" name="type"></el-checkbox>
                  <el-checkbox label="3月" name="type"></el-checkbox>
                  <el-checkbox label="4月" name="type"></el-checkbox>
                  <el-checkbox label="5月" name="type"></el-checkbox>
                  <el-checkbox label="6月" name="type"></el-checkbox>
                  <el-checkbox label="7月" name="type"></el-checkbox>
                  <el-checkbox label="8月" name="type"></el-checkbox>
                  <el-checkbox label="9月" name="type"></el-checkbox>
                  <el-checkbox label="10月" name="type"></el-checkbox>
                  <el-checkbox label="11月" name="type"></el-checkbox>
                  <el-checkbox label="12月" name="type"></el-checkbox>                
              </div>
              <el-button type="primary" @click="selectMonth">确定</el-button>
            </el-card>
          </div>
          <div>
              <div>
                年份：<input type="text" style="outline:none;border:1px solid #CDCDB4;width:50px;height:15px;border-radius:3px;padding:10px">
                月份：
                <el-select v-model="value" placeholder="请选择">
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                主持人：<input type="text" style="outline:none;border:1px solid #CDCDB4;width:80px;height:15px;border-radius:3px;padding:10px">
                <el-select v-model="value" placeholder="缴纳状态" style="margin-left:20px">
                  <el-option
                    v-for="item in state"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                  </el-option>
                </el-select>
                <el-button type="primary" style="margin-left:15px">筛选</el-button>
              </div>
              <p style="text-align:left;margin:20px 0">已查询到xxx条数据，查询到应交金额xxx元 <span style="margin-left:20px;color:blue;cursor:pointer">数据导出</span></p>
              <table>
                <tr>
                  <th>编号</th>
                  <th>主持人姓名</th>
                  <th>管理费</th>
                  <th>滞纳金</th>
                  <th>应交额度</th>
                  <th>缴纳状态</th>
                  <th>缴纳时间</th>
                  <th>操作</th>
                </tr>
                <tr>
                  <td>1</td>
                  <td>白岩松</td>
                  <td>500</td>
                  <td>100</td>
                  <td>500</td>
                  <td>待缴纳</td>
                  <td>2020-10-02</td>
                  <td>---</td>
                </tr>
                <tr>
                  <td>2</td>
                  <td>白岩松</td>
                  <td>500</td>
                  <td>100</td>
                  <td>500</td>
                  <td>待缴纳</td>
                  <td>2020-10-02</td>
                  <td>---</td>
                </tr>
                <tr>
                  <td>3</td>
                  <td>白岩松</td>
                  <td>500</td>
                  <td>100</td>
                  <td>500</td>
                  <td>待缴纳</td>
                  <td>2020-10-02</td>
                  <td>---</td>
                </tr>
                <tr>
                  <td>4</td>
                  <td>白岩松</td>
                  <td>500</td>
                  <td>100</td>
                  <td>500</td>
                  <td>已缴纳，一级延迟</td>
                  <td>2020-10-02</td>
                  <td>---</td>
                </tr>
              </table>
          </div>
      </div>
  </div>
</template>

<script>
export default {
  name:'Money',
  data(){
    return {
      date:['1月','2月','3月'],
      isMonth:false,
      state:[
        {
          value: '选项1',
          label: '待缴纳'
        },{
          value: '选项2',
          label: '待缴纳，一级延迟'
        },{
          value: '选项3',
          label: '待缴纳，二级延迟'
        },{
          value: '选项4',
          label: '已正常缴纳'
        },{
          value: '选项5',
          label: '已缴纳，一级延迟'
        },{
          value: '选项6',
          label: '已缴纳，二级延迟'
        },
      ],
      options: [{
          value: '选项1',
          label: '全年'
        }, {
          value: '选项2',
          label: '1月'
        }, {
          value: '选项3',
          label: '2月'
        }, {
          value: '选项4',
          label: '3月'
        }, {
          value: '选项5',
          label: '4月'
        }, {
          value: '选项6',
          label: '5月'
        }, {
          value: '选项7',
          label: '6月'
        }, {
          value: '选项8',
          label: '7月'
        }, {
          value: '选项9',
          label: '8月'
        }, {
          value: '选项10',
          label: '9月'
        }, {
          value: '选项11',
          label: '10月'
        }, {
          value: '选项12',
          label: '11月'
        }, {
          value: '选项13',
          label: '12月'
        }],
        value: ''
    }
  },
  methods:{
    resetDate(){
      // console.log(this.date);
      this.isMonth=!this.isMonth;

    },
    selectMonth(e){
      // console.log(e);
      var month=document.querySelectorAll('.is-checked>.el-checkbox__label');
      // console.log(month);
      var arr=[];
      for(var i=0;i<month.length;i++){
          arr.push(month[i].innerText)
          // console.log(month[i].innerText);
        }
      
      this.date=arr;
      this.isMonth=!this.isMonth;
    }
  }
}
</script>

<style scpoed>
label{
  width:30px;
  height: 40px;
}
th,td,tr,table{
  border:1px solid gray;
  border-collapse:collapse;
}
td,th{
  width: 140px;
  height: 25px;
}
</style>